<template>
  <el-row class="user-info-form" type="flex" justify="center">
    <el-col>
      <el-form label-position="top" :model="editForm" :rules="editFormRules" ref="editForm" @submit.native.prevent>
        <el-form-item v-if="isMuilUnitUser" label="业主单位：" prop="orgId">
          <el-select clearable v-model="editForm.organizationId" placeholder="请选择业主单位">
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话号码：" prop="phone">
          <el-input v-model="editForm.phone" auto-complete="off" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="editForm.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" prop="idCardNumber">
          <el-input v-model="editForm.idCardNumber" auto-complete="off" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label-width="0" class="verifyidentity-button">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="saveForm('editForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import { addPhoneBookUser } from '@/api/communicat'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'AddMailForm',
  props: ['closeDialog', 'oldInfo'],
  data() {
    return {
      editForm: {
        organizationId: '',
        name: '',
        phone: '',
        idCardNumber: '',
        email: '',
      },
      editFormRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapState(['orgOptions', 'userOrgId']),
    ...mapGetters(['isMuilUnitUser']),
  },
  created() {
    // 编辑，历史数据代入
    if (this.oldInfo) {
      this.editForm = { ...this.oldInfo }
    }
  },
  methods: {
    saveForm(formName) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let parames = that.editForm

          parames.id = that.oldInfo ? that.oldInfo.id : 0 // 0新增 不为0更新
          parames.createAccount = that.$store.state.userinfo.accountName // 创建人

          addPhoneBookUser(parames).then((res) => {
            if (res.status === 200) {
              that.$message({
                message: '保存成功！',
                type: 'success',
              })
              that.closeDialog(true)
            } else {
              this.$message.error(res.info)
            }
            that.closeDialog()
          })
        } else {
          return false
        }
      })
    },
  },
}
</script>
